<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #dhair1 {
            width: 426px;
            height: 412px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: aqua;
            overflow: hidden;
        }
        #ihair1 {
            position: absolute;
            top: -484px;
            left: -125px
        }
        #dface {
            width: 296px;
            height: 368px;
            position: absolute;
            top: 110px;
            left: 159px;
            overflow: hidden;
            border-top-right-radius: 40%;
        }
        #iface {
            position: absolute;
            top: -5px;
            left: -504px;
        }
        #dhair2 {
            width: 350px;
            height: 311px;
            position: absolute;
            top: 100px;
            left: 128px;
            overflow: hidden;
        }
        #dhair2 div {
            width: 105px;
            height: 50px;
            position: absolute;
            top: 261px;
            left: 150px;
            background-color: #ffedd9;
        }
        #ihair2 {
            position: absolute;
            top: -296px;
            left: -670px
        }
    </style>
</head>
<body>
       <div id="dhair1">
           <img id="ihair1" src="img/22head.png" alt="">
       </div>
       
       <div id="dface">
           <img id="iface" src="img/22face.png" alt="">
       </div>
       <div id="dhair2">
           <img id="ihair2" src="img/22head.png" alt="">
           <div></div>
       </div>
</body>
</html>